import React, { PureComponent } from 'react';
import { Menu } from 'antd-mobile';
import { good_menu } from './GoodsClassMenu.less';
// import ScrollArea from 'react-scrollbar';

class GoodsClassMenu extends PureComponent {
  constructor(props) {
    super(props);
  }
  onMenuChange = (id) => {
      // console.log(id)
    this.props.onMenuChange( id );

  }

  // scrollInnerNo=(e)=>{
  //   //console.log(e);
  //  // if(e.target==this.refs.noscroll){
  //
  //  // }else {
  //    //
  //  // }
  //   e.preventDefault();
  // }

  // componentDidMount() {
  //
  //   //this.refs.noscroll.addEventListener('touchmove', this.scrollInnerNo, false);
  //   //console.log(document.getElementById('noscroll'));
  //  // console.log(this.refs.noscroll);
  // }
  // componentWillUnMount(){
  //   //this.refs.noscroll.removeEventListener('touchmove', this.scrollInnerNo, false);
  // }
    render() {
        const {data} = this.props;
        let convertedData = data.map(item => {
            return {
                value: item.id,
                label: item.name,
                isLeaf: true
            }
        });
        if (!convertedData || convertedData.length == 0) {
            return null;
        }

        const height = `${document.documentElement.clientHeight / 100 - 1.8}rem`;
        return <Menu
            //style={{fontSize: '.24rem', color: 'red', marginRight: '0.1rem'}}
            level={1}
            data={[...convertedData,...convertedData]}
            value={[convertedData[0].value]}
            height={height}
            onChange={this.onMenuChange}
            className='good-menu'
        />
    }

  // render() {
  //   const { data, selectId } = this.props;
  //   console.log(data)
  //   // let convertedData = data.map(item => {
  //   //   return {
  //   //     value: `${item.gcAdvid}-${item.gcId}`,
  //   //     label: item.gcName,
  //   //     isLeaf: true
  //   //   }
  //   // });
  //   // if (!convertedData || convertedData.length == 0) {
  //   //   return null;
  //   // }
  //
  //   //const height = `${(document.documentElement.clientHeight||document.body.clientHeight) / parseFloat(document.getElementsByTagName('html')[0].style.fontSize) - 2}rem`;
  //   return (
  //     //   className={good_menu}
  //     // contentClassName="good_menu_sub"
  //       <div className="good_menu_sub">
  //       {
  //           data.map((v, i) => {
  //             return (
  //               <div
  //                 onClick={() => { this.onMenuChange(v.id, v.id); }}
  //                 style={selectId == `${v.id}_${v.id}` ? { backgroundColor: '#f5f5f9', color: 'red' } : {}}
  //                 className="good_menu_item"
  //                 key={i}
  //               >
  //                 { v.name }
  //               </div>
  //             );
  //           })
  //         }
  //       </div>
  //
  //     );
  // }
}

export default GoodsClassMenu;
